<template>
    <div class="hero-list-container">
        <el-button class="btn-pos"
                   type="primary"
                   icon="el-icon-upload"
                   size="small"
                   @click="goAdd">补录</el-button>
        <el-table
                :data="listData"
                style="width: 100%">
            <el-table-column
                    label="贴图"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.src" alt="" width="48">
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="alis"
                    label="英文名"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="goDetail(scope.$index, scope.row)">查看</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="goUpdate(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="详情"
                :visible.sync="dialogVisible"
                width="60%">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="贴图">
                    <img :src="itemDetailData.src" alt="" height="64">
                </el-form-item>
                <el-form-item label="名称">
                    <span>{{ itemDetailData.name }}</span>
                </el-form-item>
                <el-form-item label="英文名">
                    <span>{{ itemDetailData.alis }}</span>
                </el-form-item>
                <el-form-item label="类别">
                    <span>{{ changeType(itemDetailData.type) }}</span>
                </el-form-item>
                <el-form-item label="分类">
                    <span>{{ itemDetailData.category }}</span>
                </el-form-item>
                <el-form-item label="伤害">
                    <span>{{ itemDetailData.damage }}</span>
                </el-form-item>
                <el-form-item label="防御">
                    <span>{{ itemDetailData.defense }}</span>
                </el-form-item>
                <el-form-item label="生成代码">
                    <span>{{ itemDetailData.code }}</span>
                </el-form-item>
                <el-form-item label="介绍">
                    <span>{{ itemDetailData.desc }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "EquList",
        data(){
            return{
                listData : [],
                dialogVisible : false,
                itemDetailData : {}
            }
        },
        activated(){
            this.fetchListData();
        },
        methods: {
            changeType(type){
                if(!type){
                    return
                }
                let arr = [{
                    label : "熔炉装备",
                    value : "FORGEEQU"
                }]
                let single = arr.filter(val =>{
                    return val.value == type;
                })
                return single[0].label;
            },
            fetchListData() {
                this.axios.get('/activity/equ',{
                    params : {
                        type : "FORGEEQU"
                    }
                })
                    .then(res=>{
                        this.listData = res.data;
                    })
            },
            goAdd(){
                // 不传id时为新增
                this.$router.push('/EquUpdate');
            },
            goDetail(index,row){
                this.axios.get('/activity/equ/single',{
                    params : {
                        id : row._id
                    }
                })
                    .then(res=>{
                        this.itemDetailData = res.data;
                        this.dialogVisible = true;
                    })
            },
            goUpdate(index,row){
                this.$router.push({
                    path : '/EquUpdate',
                    query : {
                        id : row._id
                    }
                })
            }
        },
    }
</script>

<style lang="scss">
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .content .el-tabs {
        max-width: 85%;
    }
</style>
<style lang="scss" scoped>
    .hero-list-container{
        position: relative;
        padding: 16px;
        .btn-pos{
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 1;
        }
    }
</style>